<template>
    <div class="goodsListContainer">
        <div class="goodsWra">
            <router-link tag="div"  :to="`goodsInfo/${ item.id }`" class="goodsGroup" v-for="item in goodsList" :key="item.id">
                <img :src="item.img_url">
                <h3 class="title">{{ item.title }}</h3>
                <div class="info">
                    <p class="price">
                        <span class="nowPrice">￥{{ item.sell_price }}</span>
                        <span class="oldPrice">￥{{ item.market_price }}</span>
                    </p>
                    <p class="sell">
                        <span class="hot">热卖中</span>
                        <span class="count">剩余：{{ item.stock_quantity }}件</span>
                    </p>
                </div>
            </router-link>
        </div>
        <mt-button type="danger" size="large" @click="addMore">加载更多</mt-button>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 获取几页数据 默认为 1
                pageIndex: 1,
                // 购物车 列表数据
                goodsList: []
            }
        },
        created() {
            // 开始 请求 获取 goods 列表数据
            this.getGoodsList()
        },
        methods: {
            // 获取 goods 列表数据
            getGoodsList() {
                this.$http.get(`api/getgoods?pageindex=${ this.pageIndex }`)
                    .then(function (data) {
                        // 判断是否 获取成功 获取失败 提示 退出
                        var data = data.body
                        if (data.status !== 0) {
                            return this.$store.commit('ToastInfo', { msg: '数据获取失败' })
                        }
                        // success
                        // 当请求过来的 数据 没有的时候 提示 一下 没有更多 商品
                        if (!data.message.length) {
                            return this.$store.commit('ToastInfo', { msg: '没有更多商品了~亲' })
                        }
                        console.log(data.message, '购物车列表数据')
                        // 购物车 列表数据 拼接新的 请求
                        this.goodsList = [...this.goodsList, ...data.message]
                    }, function () {
                        return this.$store.commit('ToastInfo', { msg: 'Server error 500', pos: 'middle' })
                    })
            },
            // 加载更多 数据
            addMore() {
               this.pageIndex++
               this.getGoodsList()
            }
        }
    }
</script>

<style scoped lang="less">
    .goodsListContainer {
        padding: 10px;
        /*商品盒子*/
        .goodsWra {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            /*商品 group*/
            .goodsGroup {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 48%;
                box-shadow: 0 0 8px #ccc;
                border: 1px solid #ccc;
                margin-bottom: 10px;
                img {
                    width: 100%;
                    display: block;
                }
                /*商品标题*/
                .title {
                    font-size: 14px;
                }
                /* 商品信息 */
                .info {
                    background-color: #eee;
                    /*商品价格*/
                    .price {
                        .nowPrice {
                            font-size: 16px;
                            color: red;
                            font-weight: bold;
                        }
                        .oldPrice {
                            margin-left: 10px;
                            text-decoration: line-through;
                        }
                    }
                    /*销售情况*/
                    .sell {
                        margin: 0;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
</style>